const str = "DATE(22,10,2)+SERIALNO(F2)+DSFIRST(A6)+'FGFGF'=1222";
function doStr(str) {
	let fnList = [ 'DATE', 'SERIALNO', 'DSFIRST' ];
	let oprList = [ '\\+', '\\-', '\\*', '\\/\\/', '>', '<', '<=', '>=', '=', '<>', '\\?', '%', '\\(', '\\)' ];
	let reg1Str = `${fnList.join('|')}`;
	let reg2Str = `${oprList.join('|')}`;
    console.log(reg2Str);
	let reg1 = new RegExp(reg1Str, 'g');
    console.log(reg1);
	let reg2 = new RegExp(reg2Str, 'g');
    let reg3 = /[\'|\"]{1}(.*)[\'|\"]{1}/

	let result = str.replace(reg1, function(match) {
		return getColorByType(1, match);
	});
    let result2 = result.replace(reg2, function(match) {
		return getColorByType(2, match);
	});
    let result3 = result2.replace(reg3, function(match, p) {
		return `'${getColorByType(3, p)}'`
	});
    console.log(result3);
    let reg4 = new RegExp(`(${front})(\\\d{1})`, 'g')
    console.log(reg4);
    let result4 = result3.replace(reg4, function (match, p1, p2) {
        return fontFront(color[p2])
    })
    let reg5 =  new RegExp(`${end}`, 'g')
    let result5 = result4.replace(reg5, function (match) {
        return fontEnd
    })

    console.log(result5);
    let reg6 = new RegExp(`<font color="(${color[1]}|${color[2]}|${color[3]})">`, 'g')
    let reg7 = new RegExp(/<\/font>/, 'g')

    console.log(reg6);
    console.log(reg7);
    let result6 = result5.replace(reg6, function (match) {
        console.log(match);
        return ''
    })
    let result7 = result6.replace(reg7, function (match) {
        return ''
    })
    console.log(result7);

}

let color = {
    1: 'red',
    2: 'blue',
    3: 'yellow'
};

let front= '@front@'
let end= '@end@'

let fontFront = (color) => `<font color="${color}">`
let fontEnd = `</font>`

function getColorByType(type, content) {
	// return `<font color="${color[type]}">${content}</font>`;
	return `${front}${type}${content}${end}`;
}
doStr(str);
let COLOR = {
    func: '#096dd9',
    opr: '#f5222d',
    str: '#eb2f96'
};
console.log(Object.values(COLOR));